<template>
	<canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
</template>
 
<script module="three" lang="renderjs">
import { createScopedThreejs } from 'threejs-miniprogram';
import { onReady } from '@dcloudio/uni-app';
import { GLTFLoader } from '@/common/three/examples/jsm/loaders/GLTFLoader.js';
// import { registerGLTFLoader  } from '@/common/threejs-miniprogram/loaders/gltf-loader';
import { OrbitControls } from '@/common/three/examples/jsm/controls/OrbitControls.js';
 
let THREE = null;
let canvas = null;
let renderer = null;
let scene = null;
let camera = null;
let controls = null;

// #ifdef MP-WEIXIN
onReady(() => {
	init();
});
// #endif

// #ifdef H5 || APP-PLUS
export default {  
  mounted() {
    init();
  }  
}  
// #endif
 
async function init() {
	// 创建THREE对象
	await createThree();
	// 如果返回的不是未定义，说明threejs成功引入
	//console.log('打印场景API', THREE.Scene);
	// 创建渲染器对象
	createRenderer();
	// 创建场景
	createScene();
	// 创建相机
	createCamera();
	// 光源设置
	createLight();
	// 加载模型
	//registerGLTFLoader(THREE);
	const res = await loadGLTF('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb');
	scene.add(res);
	// 执行渲染操作，指定场景，相机作为参数
	renderer.render(scene, camera);
	// 创建控制器
	createControls();
	console.log(controls);
	// 渲染动画
	animate();
	
}
 
function createThree() {
	return new Promise((resolve) => {
		// #ifdef MP-WEIXIN
		uni.createSelectorQuery()
			.select('#webgl')
			.node()
			.exec((res) => {
				//canvas做动画时要用
				canvas = res[0].node;
				// 创建一个与 canvas 绑定的 three.js
				THREE = createScopedThreejs(canvas);
				resolve();
			});
		// #endif
		
		// #ifdef H5 || APP-PLUS
		canvas = document.getElementById('webgl');
		THREE = require('@/common/three/build/three.module.js')
		resolve();
		// #endif
	});
}
 
function createRenderer() {
	// #ifdef MP-WEIXIN
	renderer = new THREE.WebGLRenderer();
	// #endif
	
	// #ifdef H5 || APP-PLUS
	renderer = new THREE.WebGLRenderer(canvas);
	// #endif
	
	renderer.setSize(canvas.width, canvas.height);
}
 
function createScene() {
	scene = new THREE.Scene();
}
 
function createCamera() {
	camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
	camera.position.set(400, 400, 800);
	camera.lookAt(0, 0, 0);
}
 
function loadGLTF(url) {
	return new Promise((resolve) => {
		new GLTFLoader().load(url, (gltf) => {
			resolve(gltf.scene);
		});
	});
	
}
 
function createLight() {
	const hemiLight = new THREE.HemisphereLight();
	hemiLight.intensity = 0.3
	scene.add( hemiLight );
	// 环境光
	const ambientLight = new THREE.AmbientLight( 0xffffff, 1);
	scene.add( ambientLight );
	//平行光
	const light = new THREE.DirectionalLight( 0xffffff, 0.3);
	light.position.set( -10, -1, 100 );
	scene.add( light );
}
 
function createControls() {
	controls = new OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true;
}
 
function animate() {
	//小程序没有window.requestAnimationFrame
	
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
	controls.update();
	
}
 
function touchMove(e) {
	controls.onTouchMove(e);
}
 
function touchEnd(e) {
	controls.onTouchEnd(e);
}
 
function touchStart(e) {
	controls.onTouchStart(e);
}
</script>
 
<style></style>